iT邦幫忙

2024 iThome 鐵人賽

DAY 24
0
自我挑戰組

UI/UX設計的初心者冒險之旅系列 第 24

DAY24#實作練習-3_繪製網站Wireframe

  • 分享至 

  • xImage
  •  

目前小農購物網站的進度,已經從user story進展到UI flow,那接下來,就開始依據前一天繪製的內容,來製作每個介面的wireframe吧!

那麼,https://ithelp.ithome.com.tw/upload/images/20240904/201685994l5b2pbXgz.png


Wireframe

  今天在製作wireframe的過程中,除了體會到昨天繪製UI flow的重要性之外,也意識到一些不合邏輯的地方,加上考量到個人能力與時間安排,所以又再精簡網站頁面,並重新繪製UI flow:
https://ithelp.ithome.com.tw/upload/images/20240904/20168599JYw9rpvz0T.jpg
  跟前一天相比,修改的主要目的是將整體頁面的複雜度降低,以及變更導航設計的排序,這樣乍看之下會顯得相對直觀一些,同時減少消耗的時間與精力。

  再根據UI flow,開始製作低保真度(low fidelity)的wireframe,目前規劃如下:
https://ithelp.ithome.com.tw/upload/images/20240904/20168599eNf5odHGxY.jpg

  也許之後會因為一些不可抗力因素(?),讓排版又出現明顯變化也說不定。


一些廢話

感覺最近都像在跟時間賽跑一樣,等過完鐵人賽的30天,我想大概還要再花好一段時間全部再吸收一次。

參考資料

無 :)


上一篇
DAY23#實作練習-2_操作邏輯流程 (Logic Flow)
下一篇
DAY25#實作練習-4_網站UI元件設計
系列文
UI/UX設計的初心者冒險之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言